<template>
    <div>
        <el-row :gutter="20">
            <el-col :md="14" :xs="24">
                <el-card shadow="hover" class="mgb20" style="height:280px;">
                    <div class="user-info">
                        <img src="../../assets/img/avatar.jpg" class="user-avator" alt />
                        <div class="user-info-cont">
                            <div class="user-info-name">{{name}}</div>
                            <div>{{role}}</div>
                        </div>
                    </div>
                    <div class="user-info-list">
                        今日销售额：
                        <span class="money">{{salesAmount.todaySale}} <b></b> {{salesAmount.todayProfit}}</span>
                    </div>
                    <div class="user-info-list">
                        这周销售额：
                        <span class="money">{{salesAmount.weekSale}} <b></b> {{salesAmount.weekProfit}}</span>
                    </div>
                    <div class="user-info-list">
                        本月销售额：
                        <span class="money">{{salesAmount.monthSale}} <b></b> {{salesAmount.monthProfit}}</span>
                    </div>
                </el-card>
                <el-card shadow="hover">
                    <schart ref="bar" class="schart" canvasId="bar" :options="saleTrend"></schart>
                </el-card>
            </el-col>
<!--            <el-col :span="6">-->
<!--                <el-card shadow="hover" style="height:660px;">-->
<!--                    <div slot="header" class="clearfix">-->
<!--                        <span style="margin-right: 20px">最近N天销量排行</span>-->
<!--                        <el-select v-model="salesDay"  @change="loadSales" style="width: 100px" placeholder="">-->
<!--                            <el-option-->
<!--                                    v-for="item in dayOptions"-->
<!--                                    :key="item.value"-->
<!--                                    :label="item.label"-->
<!--                                    size="mini"-->
<!--                                    :value="item.value">-->
<!--                            </el-option>-->
<!--                        </el-select>-->
<!--                    </div>-->
<!--                    <span v-for="(item, k) in skuSales">-->
<!--                        {{item.sku_name}}-->
<!--                       <el-progress :percentage="item.pct" :format="showSalesCount" :color="colorArr[k%4]"></el-progress>-->
<!--                    </span>-->
<!--                </el-card>-->
<!--            </el-col>-->
            <el-col :md="8" :xs="24">
                <el-card shadow="hover" style="height:640px;overflow: scroll;">
                    <div slot="header" class="clearfix">
                        <span style="margin-right: 20px">库存&lt;最近N天销量</span>
                        <el-select v-model="lackDay" @change="loadLack" style="width: 100px" placeholder="">
                            <el-option
                                    v-for="item in dayOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    size="mini"
                                    @change="loadLack"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <span v-for="(item, k) in skuLacks">
                        {{item.sku_name}}
                       <el-progress :percentage="item.pct" :format="showLackNum" :color="colorArr[k%4]"></el-progress>
                    </span>
                </el-card>
            </el-col>
        </el-row>

    </div>
</template>

<script>
import Schart from 'vue-schart';

export default {
    name: 'dashboard',
    data() {
        return {
            name: localStorage.getItem('ms_username'),
            salesAmount: {
                monthSale: "",
                todaySale: "",
                weekSale: "",
                monthProfit: "",
                todayProfit: "",
                weekProfit: "",
            },
            skuSales: [],
            skuLacks: [],
            skuSaleBase: 100,
            skuLackBase: 100,
            dayOptions: [
                {value: 3, label: 3},
                {value: 7, label: 7},
                {value: 15, label: 15},
                {value: 30, label: 30},
                {value: 90, label: 90},
                {value: 180, label: 180},
            ],
            colorArr: [
                '#42b983', '#f1e05a', '#f56c6c', '#409EFF'
            ],
            salesDay: 7,
            lackDay: 7,
            saleTrend: {
                type: 'bar',
                title: {
                    text: '最近7天销量/毛利'
                },
                topPadding: 100,
                xRorate: 30,
                yEqual: 5,
                labels: [],
                datasets: [
                    {
                        label: '',
                        data: []
                    },
                    {
                        label: '',
                        data: []
                    },
                ],
            },
        };
    },
    components: {
        Schart
    },
    computed: {
        role() {
            return this.name === 'admin' ? '超级管理员' : '普通用户';
        }
    },
    created() {
        this.http.getSales().then(res => {
            this.salesAmount = res.data
        });
        //this.loadSales()
        this.loadLack()
        this.loadSaleTrend()
    },

    // activated() {
    //     this.handleListener();
    // },
    // deactivated() {
    //     window.removeEventListener('resize', this.renderChart);
    //     bus.$off('collapse', this.handleBus);
    // },
    methods: {
        loadSales(){
            this.http.getSkuSales(this.salesDay).then(res => {
                if(res.data.length > 0) {
                    this.skuSaleBase = res.data[0].sku_sales
                }
                this.skuSales = res.data
                this.skuSales.forEach(item => {
                    item.pct = parseInt(item.sku_sales / this.skuSaleBase * 100)
                    return item
                })
            });
        },
        loadSaleTrend(){
            this.http.getSalesTrend().then(res1 => {
                this.http.getProfitTrend().then(res => {
                    res1.data.forEach(item => {
                        this.saleTrend.labels.push(item.date)
                        this.saleTrend.datasets[0].data.push(item.sales)
                    })
                    this.saleTrend.datasets[0].label = '销售额'

                    res.data.forEach(item => {
                        this.saleTrend.datasets[1].data.push(item.total_profit)
                    })
                    this.saleTrend.datasets[1].label = '毛利润'
                });
            });
        },
        loadLack(){
            this.http.getStockSales(this.lackDay).then(res => {
                if(res.data.length > 0) {
                    this.skuLackBase = parseInt(res.data[0].lack_amount)
                }
                this.skuLacks = res.data
                this.skuLacks.forEach(item => {
                    item.pct = parseInt(item.lack_amount / this.skuLackBase * 100)
                    return item
                })
            });
        },
        showSalesCount(pct){
            return parseInt(this.skuSaleBase * pct / 100)
        },
        showLackNum(pct){
            if(pct === 100) {
                return '售罄'
            }
            return pct
        }
        // handleListener() {
        //     bus.$on('collapse', this.handleBus);
        //     // 调用renderChart方法对图表进行重新渲染
        //     window.addEventListener('resize', this.renderChart);
        // },
        // handleBus(msg) {
        //     setTimeout(() => {
        //         this.renderChart();
        //     }, 200);
        // },
        // renderChart() {
        //     this.$refs.bar.renderChart();
        //     this.$refs.line.renderChart();
        // }
    }
};
</script>


<style scoped>
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 15px;
    color: #999;
    line-height: 30px;
}

.user-info-list span {
    margin-left: 70px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}
.money {
    color: #ff4d51
}
.money b {
    margin: 0 8px;
}
.schart {
    width: 100%;
    height: 280px;
}
</style>
